<template>
	<view class="userbank">
		<view class="info">

			<!-- <view class="info_input">
				<text>旧密码</text>
				<input type="password" placeholder="请输入旧密码" v-model="old_password" />
			</view> -->
			<view class="info_input">
				<text>手机号</text>
				<input type="number" :value="phone" disabled="true" />
			</view>
			<view class="info_input">
				<text>验证码</text>
				<input type="number" placeholder="请输入验证码" maxlength="6" v-model="code" style="width: 50%;" />
				<text
					style="padding: 3px 5px;border: 1px solid #777;border-radius: 4px;display: block;width: 82px;text-align: center;margin-right: 0;"
					:style="{'color':getCodeBtnColor}" @tap.stop="getCode()">{{getCodeText}}</text>
			</view>
			<view class="info_input">
				<text>新密码</text>
				<input type="password" placeholder="请输入新密码" v-model="new_password" />
			</view>
			<view class="info_input">
				<text>确认密码</text>
				<input type="password" placeholder="请输入新密码" v-model="new_password_re" />
			</view>
		</view>
		<view class="btn" @click="UserPassPay()">
			保存并使用
		</view>
	</view>
</template>

<script>
	import {
		Index,
		UserPassLogin
	} from '@/api/user.js'
	import {
		SendCode
	} from "@/api/api.js"
	export default {

		data() {
			return {
				phone: '',
				code: '',
				old_password: '',
				new_password: '',
				new_password_re: '',
				getCodeisWaiting: false,
				getCodeBtnColor: '#000',
				getCodeText: '发送验证码'
			}
		},
		onLoad() {
			this.Index()
		},
		methods: {
			Index() {
				Index().then(res => {
					this.phone = res.data.info.phone
				})
			},
			getCode() {
				uni.hideKeyboard()
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(0,0,0,0.5)"
				let that = this
				//示例用定时器模拟请求效果
				setTimeout(() => {
					// uni.showToast({
					// 	title: '验证码已发送',
					// 	icon: "none"
					// });
					SendCode({
						phone: this.phone,
						type: 'reg',
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					})
					//示例默认1234，生产中请删除这一句。
					// this.code = 1234;
					this.setTimer();
				}, 1000)
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#000000";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			UserPassPay() {
				if (this.new_password == '') {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return false
				}
				if (this.new_password_re != this.new_password) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return false
				}
				UserPassLogin({
					// old_password: this.old_password,
					code: this.code,
					new_password: this.new_password

				}).then(res => {
					console.log(res)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					if (res.status == 1) {
						setTimeout(res => {
							uni.navigateBack()
						}, 1000)
					}
				})

			},

		}
	}
</script>

<style lang="scss">
	.btn {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.4);
		width: 70%;
		height: 40px;
		border-radius: 40px;
		background-color: #f06c7a;
		color: #fff;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		display: flex;
		margin: 30px auto;
	}

	.info {
		.title {
			padding: 5%;
			color: #000;
			font-size: 15px;
		}

		.info_input {
			background: #FFFFFF;
			padding: 5%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			text {
				margin-right: 15px;
				font-size: 14px;
			}
		}
	}
</style>
